今日文章目錄

• 需求說明
• 過程紀錄
• 參考文章

今天來練習Router切換頁面。

需求說明

• 兩個頁面：登入頁、顯示頁
• 邏輯規劃：(這次只會做到檢查帳號、密碼有填，就當作成功。)
  

過程紀錄

• 顯示頁使用原本的ToDoPage(加入登出鈕)，新增登入頁LoginPage(加入登入鈕)。
• 頁面 router 規劃：我使用 react-router-dom來練習。
• react-router-dom 四大核心: Router Switch Route Link
• Router: 規範切換頁面的影響範圍。
• Link: 指定切換頁面路徑位置的其中一個方法。
• Switch Route: Switch比對Route路徑，路徑符合Route，執行轉換頁面。

直接來看例子：

1. 安排路徑path與對應的顯示頁面component：

const routes = [
  {
    exact: true,
    path: '/',
    component: <LoginPage />,
  },
  {
    path: '/toDoPage',
    component: <ToDoPage />,
  },
  {
    path: '/loginPage',
    component: <LoginPage />,
  },
];

2. 在App.jsx(所有頁面的集散地)加入Router Switch Route。

function App() {
  return (
    <Router>
      <Switch>
        {routes.map((item) => (
          <Route
            key={item.path}
            exact={item.exact}
            path={item.path}
          >
            {item.component}
          </Route>
        ))}
      </Switch>
    </Router>
  );
}
export default App;

(補充) exact: 代表 Switch在比對路徑，指定路徑要完全等同path，才滿足條件。
這在針對主頁path: '/'都建議要加，來看看差異：

(一) 沒加exact的話:
如果我頁面要指向path: '/toDoPage'，但Switch先爬到第一個且符合要求path="/"，頁面就直接指向LoginPage，就不會看到ToDoPage。

<Router>
  <Switch>
      <Route path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>

(二) 改善的方法1: 把path="/"條件放在最後一個，這樣Switch就會先找到ToDoPage。

<Router>
  <Switch>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
      <Route path="/">
          <LoginPage />
      </Route>
 </Switch>
</Router>

(三) 改善的方法2: 把path="/"加入exact，Switch符合100%符合的路徑，才會轉換。

<Router>
  <Switch>
      <Route exact path="/">
          <LoginPage />
      </Route>
      <Route path="/toDoPage">
          <ToDoPage />
      </Route>
 </Switch>
</Router>

4. 在需要轉換頁面的地方加入Link: 這裡to的路徑要對應到上方的path。

<Link to="/loginPage">登入頁面</Link>

5. 使用Router提供useHistory()方法，指定路徑切換：

export default function LoginPage() {
  const history = useHistory();
  const handleSubmit = () => {
      history.push('/toDoPage');
  };
  
  return(
    <Button 
      type="primary" 
      htmlType="submit" 
      onClick={handleSubmit}
    >
        Submit
    </Button>
  )
}

參考文章

• react-router-dom